<template>
  <div class="option">
    <div class="left" :class="{left_purple_unsubmited:index%3 == 0 && !chooseSubmited,
                               left_yellow_unsubmited:index%3==1 && !chooseSubmited,
                               left_pink_unsubmited:index%3==2 && !chooseSubmited,
                               left_purple_submited:index%3 == 0 && chooseSubmited,
                               left_yellow_submited:index%3==1 && chooseSubmited,
                               left_pink_submited:index%3==2 && chooseSubmited,
                               }">
    </div>
    <div class="right">
      <div class="chooseIcon_warp" :class="{unchooseIcon_warp:chooseSubmited}"
           @click="updateSelected()">
        <img class="icon" :src="selected === true?choosedIcon:unchoosedIcon">
      </div>
      <div class="text_warp" :class="{text_warp_ChooseSubmit:chooseSubmited}">
        <p class="content" @click="enterExcel()">
          <span class="text">{{content}}</span>
          <img class="icon" src="../../assets/img/icon/enter.svg">
        </p>
        <p class="tip">{{tip}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import choosedIcon from '../../assets/img/icon/uploader_file_rb_s.svg'
import unchoosedIcon from '../../assets/img/icon/uploader_file_rb_n.svg'
export default {
  name: 'middle_option',
  props: ['id', 'content', 'tip', 'index', 'selected', 'chooseSubmited'],
  data () {
    return {
      choosedIcon: choosedIcon,
      unchoosedIcon: unchoosedIcon
    }
  },
  methods: {
    updateSelected () {
      // alert('点击了按钮')
      if (this.chooseSubmited === true) {
        // alert('return')
        return
      }
      let data = {
        index: this.index,
        selected: this.selected
      }
      this.$emit('update-selected', data)
      // alert('emit完毕')
    },
    enterExcel () {
      let data = {
        id: this.id,
        title: this.content
      }
      this.$emit('enter-excel-by-id', data)
    }
  }
}
</script>

<style lang="scss" scoped>
  .option{
    width: 85%;
    height: px2rem(80);
    background-color: #FFF;
    margin: px2rem(10) auto 0;
    position: relative;
    .left_purple_unsubmited{
      background-color: $ui-color-assist-purple;
    }
    .left_yellow_unsubmited{
      background-color: $ui-color-decorate-yellow;
    }
    .left_pink_unsubmited{
      background-color: $card-color-pink;
    }
    .left_purple_submited{
      background-color: rgba(157,106,232,0.5);
    }
    .left_yellow_submited{
      background-color: rgba(254,201,6,0.5);
    }
    .left_pink_submited{
      background-color: rgba(252,105,133,0.5);
    }
    .left{
      float: left;
      width: px2rem(6);
      height: px2rem(80);
      border-radius: px2rem(6) 0 0 px2rem(6);
    }
    .right{
      //width: call(100%- #{px2rem(325)});
      background-color: #FFF;
      position: absolute;
      top: 0;
      left: px2rem(6);
      right: 0;
      width: 100%;
      height: px2rem(80);
      /*border: px2rem(2) solid black;*/
      border-radius: 0 px2rem(6) px2rem(6) 0;
      .chooseIcon_warp{
         float: left;
         width: px2rem(44);
         height: px2rem(80);
         /*border: px2rem(2) solid black;*/
         .icon{
           height: px2rem(44);
         }
       }
      .unchooseIcon_warp{
        width: px2rem(20);
        /*border: px2rem(2) solid black;*/
        .icon{
          display: none;
        }
      }
      .text_warp{
        /*border: px2rem(2) solid black;*/
        width: 80%;
        float: left;
        .content{
          width: 100%;
          height: px2rem(44);
          line-height: px2rem(44);
          /*border: px2rem(1) solid red;*/
          .text{
            float: left;
            /*border: px2rem(1) solid black;*/
            max-width: 90%;
            height: px2rem(44);
            font-size: $text-size-imp;
            color: #333333;
            //超出的部分用省略号代替
            text-overflow: ellipsis;
            //不换行
            white-space: nowrap;
            overflow: hidden;
          }
          .icon{
            float: left;
            width: px2rem(22);
            height: px2rem(22);
            margin-top: px2rem(10);
          }
        }
        .tip{
          float: none;
          /*max-width: 100%;*/
          height: px2rem(30);
          line-height: px2rem(15);
          font-size: $text-size-normal;
          color: #999999;
          /*border: px2rem(1) solid red;*/
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
      .text_warp_ChooseSubmit{
        width: 90%;
      }
    }
  }
</style>
